<nz-card class="pagination-wrap-position">
    <div class="operation-wrap">
        <button
            *ngIf="permission.userPermission.has('config:goodsPublicnote:add')"
            nz-button
            nzType="primary"
            (click)="showModal(0)">
            新增
        </button>
    </div>

    <!-- Table -->
    <div class="table-wrap p-t-15">
        <nz-table
            #basicTable
            nzSize="small"
            nzShowSizeChanger
            nzShowQuickJumper
            nzOuterBordered
            [nzFrontPagination]="false"
            [nzLoadingDelay]="100"
            [nzLoading]="tableParams.tableLoading"
            [nzData]="tableData"
            [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
            [nzTotal]="tableParams.total"
            [nzPageIndex]="tableParams.page"
            [nzPageSize]="tableParams.pageSize"
            [nzShowTotal]="totalTemplate"
            (nzPageIndexChange)="onPageIndexChange($event)"
            (nzPageSizeChange)="onPageSizeChange($event)"
        >
            <thead>
                <tr>
                    <th nzAlign="center" nzWidth="86px">ID</th>
                    <th nzAlign="center">名称</th>
                    <th nzAlign="center">创建时间</th>
                    <th nzAlign="center">更新时间</th>
                    <th nzAlign="center">操作</th>
                </tr>
            </thead>
  
            <tbody>
                <tr *ngFor="let data of basicTable.data; let index = index;">
                    <td nzAlign="center">{{ data.id }}</td>
                    <td nzAlign="center">{{ data.noteName }}</td>
                    <td nzAlign="center">{{ data.createTime }}</td>
                    <td nzAlign="center">{{ data.updateTime }}</td>
                    <td nzAlign="center">
                        <button
                            *ngIf="permission.userPermission.has('config:goodsPublicnote:edit')"
                            nz-button
                            nzType="link"
                            (click)="showModal(1, data)">
                            编辑
                        </button>
                        <a
                            *ngIf="permission.userPermission.has('config:goodsPublicnote:delete')"
                            nz-button
                            nzType="link"
                            nzDanger
                            nz-popconfirm
                            nzPopconfirmTitle="确认删除?"
                            [nzIcon]="iconTpl"
                            (nzOnConfirm)="delateData(data)">
                            删除
                        </a>
                        <ng-template #iconTpl>
                            <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                        </ng-template>
                    </td>
                </tr>
            </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ tableParams.total }} 条</ng-template>
    </div>
</nz-card>

<!-- S 新增编辑 Modal -->
<nz-modal
    nzClassName="custom-model-wrap"
    nzWidth="620px"
    [nzFooter]="null"
    [(nzVisible)]="isVisible"
    [nzTitle]="modalType == 0 ? '新增' : '编辑'"
    (nzOnCancel)="handleCancel()"
    (nzAfterOpen)="openModal()">

    <div *nzModalContent>
        <div class="custom-model-body">
            <!-- body START -->
            <form nz-form class="modal-body" [formGroup]="validateForm">
                <nz-form-item>
                    <nz-form-label nzSpan="4" nzRequired>名称</nz-form-label>
                    <nz-form-control nzSpan="20" nzErrorTip="请输入名称!">
                        <input formControlName="noteName" nz-input placeholder="请输入名称" />
                    </nz-form-control>
                </nz-form-item>
                
                <nz-form-item>
                    <nz-form-label nzSpan="4">工具</nz-form-label>
                    <nz-form-control nzSpan="20">
                        <label for="fileImg" class="upload-label">
                            <i nz-icon [nzType]="uploadLoading ? 'loading' : 'upload'" nzTheme="outline"></i>
                            图片
                            <input id="fileImg" type="file" accept="image/*" hidden (change)="handleFileInput($event)">
                        </label>
                    </nz-form-control>
                </nz-form-item>

                <nz-form-item>
                    <nz-form-label nzSpan="4">通用文本</nz-form-label>
                    <nz-form-control nzSpan="20">
                        <nz-spin [nzSpinning]="isEditorLoad" nzTip="Loading...">
                            <div id="editorContent"></div>
                        </nz-spin>
                    </nz-form-control>
                </nz-form-item>
            </form>
            <!-- body END -->
        </div>

        <div class="custom-model-foot">
            <div class="custom-foot-cont">
                <button nz-button nzType="primary" [nzLoading]="submitLoading" (click)="submitForm()">确定</button>
                <button nz-button nzType="default" (click)="handleCancel()">取消</button>
            </div>
        </div>
    </div>
</nz-modal>
<!-- E 新增编辑 Modal -->
